﻿@{
    ResponseDto resDto = (ResponseDto)ViewData["model"];
}

<style>
    .zoom {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
</style>

<link href="/css/image/viewer.css" rel="stylesheet">

<div class="zoom">
    <img id="image" style="width:800px" src="@resDto.FileInfo.Path" alt="@resDto.FileInfo.Name" hidden>
</div>

@*<div style="display:flex;align-items:center;justify-content:center;height: 100%;">
    <div id="images">
        <div><img style="width:800px" src="@fileView.RelativePath" alt="Picture 1"></div>
    </div>
</div>*@

<script src="/lib/jquery/dist/jquery-3.4.1.js"></script>
<script src="/js/image/viewer.js"></script>

<script type="text/javascript">

    $(function() {
        var $image = $('#image');
        $image.viewer({
            inline: true,
            navbar: false,
            button: false,
            //viewed: function() {
            //    $image.viewer('zoomTo', 1);
            //}
        });
        var viewer = $image.data('viewer');
        $('#images').viewer();
        //$('img').eq(0).click();
    })


</script>


